<template>
	<scroll-view class="album_scroll_view" scroll-y @scrolltolower="handerToLower">
		<!--分类列表开始-->
		<view class="album_list">
			<navigator class="album_item" v-for="item in lists" :key="item.id" :url="`/pages/picturebooks/index?id=${item.articleId}`">
				<view class="album_img">
					<image mode="aspectFill" :src="item.cover"></image>
				</view>
				<view class="album_info">
					<view class="album_info">
						<view class="album_name">{{item.articleName}}</view>
						<view class="album_desc">{{item.apArticle.description}}</view>
						<view class="album_btn">
							<view class="album_show iconfont icon-chakan">
								<view class="shou_number">20</view>
							</view>
							<view class="album_attention">查看</view>
						</view>
					</view>
				</view>
			</navigator>
		</view>
		<!--列表结束-->
	</scroll-view>
</template>

<script>
	export default {
		data() {
			return {
				params: {
					pageSize: 10,
					keywords: "news",
					pageNum: 1,
					channelId: -1
				},
				//轮播图数据
				banner: [],
				//列表数组
				lists: [],
				hasMove: true,
				channelId: -1
			}
		},
		onLoad(opentions) {
			uni.setNavigationBarTitle({
				title: "绘本列表"
			})
			this.params.channelId = opentions.id;
			// this.id = "23"
			this.getList()
		},
		methods: {
			//获取最新数据
			getList() {
				this.request({
					url: this.httpServer + '/v1/app/channel/channelList',
					data: this.params,
				}).then(res => {
					if (res.rows.length === 0) {
						this.hasMove = false;
						return;
					}
					this.lists = [...this.lists, ...res.rows[0].news];
				})
			},
			handerToLower() {
				if (this.hasMove) {
					this.params.pageNum += 1
					this.getList();
				} else {
					uni.showToast({
						title: "没有更多数据了...",
						icon: "none"
					})
				}
			},
		}
	}
</script>


<style lang="scss" scoped>
	.album_scroll_view {
		height: calc(100vh - 36px);
	}

	.album_swiper {
		swiper {
			height: 278rpx;

			image {
				height: 100%;
			}
		}
	}

	.album_list {
		padding: 10rpx;

		.album_item {
			padding: 10rpx 0rpx;
			display: flex;
			border-bottom: 1rpx solid #C0C0C0;

			.album_img {
				flex: 1;
				padding: 10rpx;

				image {
					width: 200rpx;
					height: 200rpx;
				}
			}

			.album_info {
				flex: 2;
				padding: 10rpx;
				overflow: hidden;

				.album_name {
					font-size: 30rpx;
					color: #000;
					padding: 10rpx 0rpx;
				}

				.album_desc {
					padding: 10rpx 0rpx;
					font-size: 24rpx;

					text-overflow: ellipsis;
					overflow: hidden;
					white-space: nowrap;
				}

				.album_btn {
					padding: 10rpx;
					display: flex;
					justify-content: space-between;
					align-self: center;

					.album_attention {
						color: $uni-color-error;
						border: 1rpx solid $uni-color-error;
						padding: 10rpx;
						border-radius: 10rpx;
					}

					.album_show {
						display: flex;
						padding: 10rpx;
						color: $uni-color-primary;
						font-size: 40rpx;

						.shou_number {
							padding: 10rpx;
							font-size: 20rpx;
							color: #808080;
						}
					}
				}
			}
		}
	}
</style>
